html,body{
    width:100%;height:100%;
}
*{
    margin:0;padding:0;text-align: left;
}
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #2c3e50;
    height:100%;
}
.zhtt-demo-card{
    margin:12px;
    border:1px solid #337ab7;
}
.zhtt-demo-card-header{
    font-weight: bold;
    font-size: 16px;
    padding:12px;
    color: #fff;
    background-color: #337ab7;
    letter-spacing: 3px;
}
.zhtt-demo-card-body{
    padding:12px;
}
.zhtt-demo-card-footer{
    border-top:1px solid #f2f2f2;
    background: #f2f2f2;
    padding:12px;
}
.zhtt-input{
    height: 20px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    width:70%;
}
.zhtt-input:focus{
    border: none;
    box-shadow:  0 0 0 1px #42A7FF,0 0 0 3px #BDE7FF;
    width:70%;
}
.zhtt-select{
    width:350px;
    height:30px;
    line-height: 30px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.zhtt-btn{
    padding: 6px 12px;
    cursor:pointer;
    margin:4px;
    color: #fff;
    font-size:16px;
    background-color: #5cb85c;
    border-color: #4cae4c;
    border-radius: 4px;
    white-space: nowrap;
    outline:none;
}
.zhtt-line{
    margin-bottom: 8px;
    padding-bottom:4px;
    border-bottom: 1px dotted #2c3e50;
}
.zhtt-border-box{
    border:1px dotted #a2a2a2;margin:8px;padding:8px;
}
input:focus{outline:none;}
button:focus{outline:none;border-color:#4cae4c;}